<template>
    <div class="word-container">
        <van-nav-bar
            class="page-nav-bar"
            title="背单词"/>

        <van-cell class="top-title" :title="(index+1) + ' / ' + total"/>
        <van-cell class="word-content" 
                  :title="currentWord.words" 
                  :label="currentWord.spell"
                  @click="voiceWord" />

        <div class="optbtn">
            <van-button class="left" type="default" @click="dontKnowWord">不会</van-button>

            <van-button class="right" type="primary" @click="knowWord">会了</van-button>
        </div>

        <div class="cannot" v-show="flag">
            <van-cell v-html="currentWord.means"/>

        </div>

        <!-- https://blog.csdn.net/humanking7/article/details/88630856 -->
    </div>
</template>
<script>
import { getIeltsWordList } from '@/apis/english'
export default {
    data() {
        return {
            records: [],
            index:0,
            total:0,
            currentWord:{},
            flag:0
        }
    },
    created() {
        this.loadEnglishList();
    },
    methods: {
        async loadEnglishList() {
            const randomStr = Math.ceil(Math.random()*400);
            const {data} = await getIeltsWordList(randomStr,10);
            console.log(data.data);
            this.records = data.data.records
            console.log(this.records );
            this.index = 0
            this.total = this.records.length
            this.currentWord = this.records[0]
        },
        dontKnowWord() {
            this.flag = 1;
        },
        knowWord() {
            this.flag = 0;
            if (this.index < this.total-1) {
                this.index++
                this.currentWord = this.records[this.index]
            }
        },
        voiceWord() {
            let audio = new Audio()
            audio.src = `http://dict.youdao.com/dictvoice?audio=${this.currentWord.words}`
            audio.play()
        }
    }
}
</script>
<style lang="less">
    .word-container {
        .top-title {
            text-align: center;
        }
        .word-content {
            text-align: center;
            height: 100px;
            font-size: 20px;
        }
        .optbtn {
            margin: 10px 0;
            display: flex;
            justify-content: space-between;
        }
        .left {
            margin-left: 50px;
        }
        .right {
            margin-right: 50px;
        }
    }
</style>